<template>
  <div class="container">
    <Tab  style="position:fixed; background-color:#fff; z-index:999"/>
    <!-- 搜索 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @input="input()"
        style="width:100%;position:fixed;top:49px; background-color:#fff;"
      />
    </form>
    <div style="height:130px"></div>
    <!-- 下拉列表 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <li style="width:100%;position:fixed;top:100px;background-color:#fff;">
        <span>物料名称</span>
        <span>物料型号</span>
        <span>物料数量</span>
      </li>
      <ul v-for="item in goodlist" :key="item.id">
        <li
          @click="select(item.product_name_value,item.product_id,item.product_type_name,item.surplus_num)"
        >
          <span style="width:40%">{{item.product_name_value}}</span>
          <span style="width:40%;overflow-x:auto;">{{item.product_type_name}}</span>
          <span style="width:10%">{{item.surplus_num}}</span>
        </li>
      </ul>
    </van-list>

    <!-- 底部栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="查看物料" :badge='this.countlist' @click="flag()"/>
      <van-goods-action-button type="primary" text="物料出库" @click="goout()"/>
    </van-goods-action>

    <!-- 弹出框选择风机和数量-->
    <van-form validate-first>
      <van-dialog v-model="show" title="选择风机数量" show-cancel-button :before-close="onBeforeClose">
        <van-field
          readonly
          clickable
          name="picker"
          :value="values"
          label="风机"
          placeholder="点击选择风机"
          @click="showPicker = true"
        />

        <van-field
          v-model="number"
          type="digit"
          label="数量"
          name="validator"
          placeholder="请输入数量"
          :rules="[{ validator, message: '请输入正确的数量' }]"
        />
      </van-dialog>
    </van-form>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <!-- 购物车上划 -->
    <van-action-sheet v-model="flag1" title="物料列表">
      <div class="content">
        <div v-for="item in list" :key="item.id">
          <van-swipe-cell>
            <van-card
              :num="item.apply_num"
              :desc="item.product_type"
              :title="item.product_name"
            />
            <span class="type">{{item.wpg_name}}</span>
            <template #right>
              <van-button square type="danger" text="删除" @click="dele(item)" style="height:80px"/>
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import Tab from 'Comp/Tab'
import { mapState, mapActions } from "vuex";
import axios from "axios";
import { getCookie } from "Utils/cookie";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      flag1: false,
      show: false,
      fan_name: "",
      number: "",
      materiel_name: "",
      list: [],
      json: {},
      goodlist: [],
      loading: false,
      finished: false,
      pagelimit: 1,
      value: "",
      value2: "",
      count: "",
      values: "",
      columns: [],
      showPicker: false,
      windList: [],
      p_code: "",
      product_id: "",
      product_type_name: "",
      surplus_num: 0,
      checknum: true,
      countlist:0,
    };
  },
  components: {
    "van-dialog": Dialog.Component,
     Tab,
  },
  computed: {},
  methods: {
    validator(val) {
      console.log("val", val);
      console.log(this.surplus_num);
      if (parseInt(val) > this.surplus_num || parseInt(val) <= 0) {
        this.checknum = false;
        return false;
      }
    },
    dele(item) {
      Dialog.confirm({
        message: "确定删除吗？"
      }).then(() => {
        for (var i = 0; i < this.list.length; i++) {
          console.log("i>>>>>>", i);
          if (this.list[i].product_id == item.product_id) {
            this.list.splice(i, 1);
          }
        }
      });
    },
    onConfirm(value, index) {
      this.values = value;
      this.p_code = this.windList[index].dt_p_code;
      this.showPicker = false;
    },

    select(item1, item2, item3, item4) {
      this.materiel_name = item1;
      this.product_id = item2;
      this.product_type_name = item3;
      // console.log(this.materiel_name1);
      this.show = true;
      this.surplus_num = item4;
    },
    flag() {
      this.flag1 = !this.flag1;
    },
    // 下拉加载
    onLoad() {
      this.search();
    },
    search() {
      this.loading = true;
      this.finished = false;
      axios({
        url: "/hrkc/Product/getItemsList",
        method: "POST",
        params: {
          pagesize: 40,
          pagelimit: this.pagelimit,
          name: this.value,
          org_code: getCookie("org_no")
        }
      })
        .then(res => {
          console.log('1111111212121',res);
          if (res.data.code == 0) {
            for (let i = 0; i < res.data.data.length; i++) {
              var item = {};
              // console.log("111111",res.data.data[i].product_name_value)
              item.product_name_value = res.data.data[i].product_name_value;
              item.product_type_name = res.data.data[i].product_type_name;
              item.surplus_num = res.data.data[i].surplus_num;
              item.product_id = res.data.data[i].id;
              this.goodlist.push(item);
            }
            this.pagelimit = this.pagelimit + 1;
          } else {
            this.finished = true;
          }
          this.loading = false;
        })
        .catch(error => Promise.reject(error));
    },

    //添加物料点击确定
    onBeforeClose(action, done) {
      if (action === "confirm") {
        console.log("values", this.checknum);
        if (this.checknum == false) {
          Toast.fail("请输入正确的数量");
          this.values = "";
          this.number = "";
          this.checknum = true;
          done();
          return;
        }
        this.json.product_name = this.materiel_name;
        this.json.product_id = this.product_id;
        this.json.product_type = this.product_type_name;
        this.json.apply_num = this.number;
        this.json.wpg_id = this.p_code;
        this.json.wpg_name = this.values;
        this.json.org_code = getCookie("org_no");
        this.list.push(this.json);
        this.countlist = this.list.length;
        console.log('countlist',this.countlist)
        this.json = {};
        this.values = "";
        this.number = "";
        done();
      } else {
        this.values = "";
        this.number = "";
        done();
      }
    },
    //购物车左滑删除
    // beforeClose({ position, instance }) {
    //   switch (position) {
    //     case "left":
    //     case "cell":
    //     case "outside":
    //       instance.close();
    //       break;
    //     case "right":
    //       Dialog.confirm({
    //         message: "确定删除吗？"
    //       })
    //         .then(() => {
    //          console.log(instance)
    //           instance.close();
    //         })
    //         .catch(() => {
    //           instance.close();
    //         });
    //       break;
    //   }
    // },
    // 跳转出库界面
    goout() {
      if (this.list.length <= 0) {
        Toast.fail("请先选择物料");
        return;
      }

      // console.log('12121212112221212',this.list);
      this.$router.push({
        path: "/goout",
        query: {
          list: JSON.stringify(this.list)
        }
      });
    },
    // 搜索事件
    onSearch(val) {
      console.log(val);
    },
    onCancel() {
      console.log("取消");
    },
    input() {
      this.pagelimit = 1;
      this.goodlist = [];
      this.onLoad();
    }
  },
  mounted() {
    //获取风机
    axios({
      url: "/hrkc/Wind/getWindList",
      method: "POST",
      params: {
        org_code: getCookie("org_no")
      }
    }).then(res => {
      console.log('风机',res)
      this.windList = res.data.data;
      for (let i = 0; i < res.data.data.length; i++) {
        var json = {};
        // console.log("111111",res.data.data[i].product_name_value)
        json.p_code = res.data.data[i].dt_p_code;
        json.p_value = res.data.data[i].dt_p_value;
        this.columns.push(res.data.data[i].dt_p_value);
      }
    });
  }
};
</script>
<style lang="scss" scoped>
.van-card {
  height: 90px;
}
.van-card__content {
  height: 70px;
}
.van-card__title {
  height: 30px;
  line-height: 30px;
  font-size: 20px;
}
.van-card__desc {
  height: 20px;
  line-height: 20px;
  font-size: 15px;
}
.van-card__num {
  margin-top: -50px;
  font-size: 15px;
}
.van-card__footer {
  margin-top: -60px;
}
.type{
position: absolute;
top:60px;
left:10px
}
.filed {
  z-index: 1;
  width: 200px;
  border: 1px solid #ccc;
  position: absolute;
  top: 93px;
  left: 90px;
  background-color: antiquewhite;
}
.content {
  padding: 16px 16px 50px;
}
li {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}
</style>